bind:group

Posted on 2023-02-05 by

For radio buttons or checkboxes you can use the bind:group binding.

Using this we can have a two way binding with a group of checkboxes or radio buttons.

1 2 3 Flavors: -

App.svelte

<script>
	let flavors = [];
</script>

<label>
	<input type="checkbox" bind:group={flavors} value="1" />1
</label>
<label>
	<input type="checkbox" bind:group={flavors} value="2" />2
</label>
<label>
	<input type="checkbox" bind:group={flavors} value="3" />3
</label>

Flavors: {flavors.join(",") || "-"}

<style>
</style>

For checkboxes we want an array to store our values in but for radio buttons we can have a single value.